<template>
  <div class="main">
    <div>
      <van-nav-bar
        title="信息修改"
        fixed
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="updateInformation">
      <van-cell-group inset>
        <van-field v-model="update.username" label="用户名" readonly />
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-field
          readonly
          v-model="update.password"
          type="password"
          label="密码"
        />
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-field
          v-model="update.sex"
          is-link
          readonly
          name="sex"
          label="性别"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </van-cell-group>

      <van-cell-group inset style="margin-top: 3px">
        <van-field label="邮箱" v-model="update.email" />
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-field label="电话" v-model="update.phone" type="tel" />
      </van-cell-group>
      <van-cell-group inset style="margin-top: 3px">
        <van-field label="借阅总数" v-model="update.num" readonly />
      </van-cell-group>
    </div>
    <div style="margin-top: 16px">
      <van-button type="success" block round @click="updates">修改</van-button>
    </div>
    <div style="margin-top: 16px">
      <van-button type="success" block round @click="cancel">返回</van-button>
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { getByUsername, updateData } from "@/api/api";
export default {
  data() {
    return {
      active: 3,
      update: {
        username: "admin",
        password: "123",
        sex: "女",
        email: "123@qq.com",
        phone: "10086",
        num: "3",
      },
      showPicker: false,
      columns: ["男", "女"],
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    onConfirm(value) {
      this.update.sex = value;
      this.showPicker = false;
    },
    updates() {
      let number = parseInt(this.update.phone);
      var phoneReg = /13[0-9]{9}/;
      var emailReg =
        /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
      if (!phoneReg.test(number) || !emailReg.test(this.update.email)) {
        this.$Message.error("请输入正确的手机号或邮箱");
      } else {
        this.$Modal.confirm({
          title: "确定",
          content: "确认要修改吗？",
          onOk: () => {
            if (this.update.sex == "男") {
              this.update.sex = "1";
            } else {
              this.update.sex = "2";
            }
            updateData(this.update).then((res) => {
              if (res == true) {
                this.$Message.success("修改成功"),
                  setTimeout(() => {
                    history.back();
                  }, 1000);
              } else {
                this.$Message.error(res);
              }
            });
          },
          onCancel: () => {
            this.$Message.info("用户取消修改");
          },
        });
      }
    },
    cancel() {
      history.back();
    },
  },
  created() {
    getByUsername({ username: localStorage.getItem("username") }).then(
      (res) => {
        if (res.sex == "1") {
          res.sex = "男";
        } else {
          res.sex = "女";
        }
        this.update = res;
      }
    );
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.updateInformation {
  margin-top: 15%;
}
</style>
